﻿<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link rel="Bookmark" href="favicon.ico" >
	<link rel="Shortcut Icon" href="favicon.ico" />
	<!--[if lt IE 9]>
	<script type="text/javascript" src="/lib/html5.js"></script>
	<script type="text/javascript" src="/lib/respond.min.js"></script>
	<![endif]-->
	<link rel="stylesheet" type="text/css" href="/static/h-ui/css/H-ui.min.css" />
	<link rel="stylesheet" type="text/css" href="/lib/Hui-iconfont/1.0.9/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="/static/business/css/style.css" />
	<!--[if IE 6]>
	<script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
	<script>DD_belatedPNG.fix('*');</script>
	<![endif]-->
	<!--/meta 作为公共模版分离出去-->

	<title>管理员列表 - 管理员列表 - h-ui.admin.pro v1.0</title>
	<meta name="keywords" content="">
	<meta name="description" content="">
	<style>
		body{
			background:url(/temp/bg.png);
		}
	</style>
</head>
<body>
	<div class="wap-container">
		<nav class="breadcrumb" style="background-color:#fff;padding: 0 24px">
			首页
			<span class="c-gray en">/</span>
			管理员管理
			<span class="c-gray en">/</span>
			管理员列表
			<a class="btn btn-success radius f-r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a>
		</nav>

		<article class="Hui-admin-content clearfix" style="opacity:0.9;">
			<!--<div class="panel">-->
				<!--<div class="panel-body">-->
					<!--<div class="text-c"> 日期范围：-->
						<!--<input type="text" id="search-datetime-start" class="input-text datetimepicker-input" style="width:120px;">-->
						<!-- - -->
						<!--<input type="text" id="search-datetime-end" class="input-text datetimepicker-input" style="width:120px;">-->
						<!--<input type="text" class="input-text" style="width:250px" placeholder="输入管理员名称" id="" name="">-->
						<!--<button type="submit" class="btn btn-success" id="" name=""><i class="Hui-iconfont">&#xe665;</i> 搜用户</button>-->
					<!--</div>-->
				<!--</div>-->
			<!--</div>-->
			<div class="panel mt-20">
				<div class="panel-body">
					<div class="clearfix">
						<span class="f-l">
							<a href="javascript:;" onclick="admin_add('添加管理员','admin-add')" class="btn btn-primary radius"><i class="Hui-iconfont">&#xe600;</i> 添加管理员</a>
						</span>
						<span class="f-r">共有数据：<strong id="total"></strong> 条</span>
					</div>
					<div class="mt-20 clearfix">
						<table  id="data-table-list" class="table table-border table-bordered table-bg table-hover table-sort">
							<thead>
								<tr>
									<th scope="col" colspan="9">管理员列表</th>
								</tr>
								<tr class="text-c">
									<th width="25"><input type="checkbox" name="" value=""></th>
									<th width="40">序号</th>
									<th width="150">登录名</th>
									<th width="90">角色</th>
									<th width="100">操作</th>
								</tr>
							</thead>
							<tbody class="getData-list"  data-currPage='1'>

							</tbody>
						</table>
					</div>
					<div id="laypage" class="text-c"></div>
				</div>
			</div>
		</article>
	</div>

	<!--_footer 作为公共模版分离出去-->
	<script type="text/javascript" src="/lib/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="/lib/layer/3.1.1/layer.js"></script>
	<script type="text/javascript" src="/static/h-ui/js/H-ui.min.js"></script>
	<!--/_footer /作为公共模版分离出去-->

	<!--请在下方写此页面业务相关的脚本-->
	<script type="text/javascript" src="/lib/datatables/1.10.15/jquery.dataTables.min.js"></script>
	<script type="text/javascript" src="/lib/laypage/1.2/laypage.js"></script>
	<script type="text/javascript" src="/static/business/js/main.js"></script>
	<script type="text/javascript">
        /* =====所有的列表页都可照搬这套模式====== */
        // 获取URL参数，初始化条件
        function getUrlParameter(){
            //parseQueryString(); //方法 在main.js中 提取URL参数为对象
            var urlObj = parseQueryString(window.location.href);
            // console.log(urlObj);

            $("#classifyID").val(urlObj.classifyID);
            $(".getData-list").attr("data-currPage",urlObj.currPage)
            $("#search-datetime-start").val(urlObj.datetimeStart);
            $("#search-datetime-end").val(urlObj.datatimeEnd);
            $("#search-input").val(urlObj.keywords);
        }
        // 封装一个获取数据列表的方法，将条件封装到options对象中
        function getDataList(options){
            $.ajax({
                url: '/admin/list/',// 跳转到 action, 换成自己的接口
                data: options,
                type: 'post',
                cache: false,
                dataType: 'json', // 不一定非要json，可以是html，后台封好结构后，直接扔前台
                success: function(respData) {
                    if(respData.result){ // 请求正确 返回true, 也指200状态
                        var data = respData.datas; // 返回的数据
                        var htmlstr = '';
                        if(data.length > 0 ) {
                            // 只有获取的数据对象长度大于0，我们才做for循环处理。
                            for(var i = 0;i< data.length;i++){ // for循环将json数据拼接成html结构。 此处可以用模板引擎。
                                var date=data[i];

                                var name=date.name==null?"":date.name;
                                var role=date.role==null?"":date.role;
                                var id=date.id==null?"":date.id;
								if(role=="0"){
                                    role="超级管理员"
								}
                                if(role=="1"){
                                    role="二级管理员"
                                }
                                if(role=="2"){
                                    role="三级管理员"
                                }
                                if(role=="3"){
                                    role="四级管理员"
                                }
                                htmlstr += '<tr class="text-c">'+
                                    '<td><input type="checkbox" value="" name=""></td>'+
                                    '<td>'+ i +'</td>'+
                                    '<td>'+ name +'</td>'+
                                    '<td>'+  role +'</td>';

                                htmlstr += '<td class="f-14 td-manage">';
                                htmlstr += '<a style="text-decoration:none" class="ml-5" onClick="edit(\''+id+'\');" href="javascript:;" title="编辑"><i class="Hui-iconfont">&#xe6df;</i></a>&nbsp;' +
                                    '<a style="text-decoration:none" class="ml-5" onClick="del(\''+id+'\');" href="javascript:;" title="删除"><i class="Hui-iconfont">&#xe6e2;</i></a>';
                                htmlstr += '</td>'+
                                    '</tr>';
                            }
                            // 在页面对应<tbody class=".getData-list">标签中输出拼接好的html结构。
                            $(".getData-list").html(htmlstr);
                            // 渲染分页
                            console.log("respData.currPage="+respData.currPage);
                            $("#total").html(respData.total);
                            laypage({
                                cont: 'laypage',    //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：&lt;div id="laypage">&lt;/div>
                                pages: Math.ceil(respData.total/respData.pageSize),  // 除法运算，向上取整
                                curr: respData.currPage,    //初始化当前页
                                hash: 'page',
                                limits: [10, 25, 50, 100],
                                first: '首页',
                                last: '尾页',
                                prev: '<em>&lt;&lt;</em>',
                                next: '<em>&gt;&gt;</em>',
                                jump: function(e, first){ //触发分页后的回调
                                    if(!first) {
                                        $(".getData-list").attr("data-currPage", e.curr);
                                        runGetDataList();
                                    }
                                }
                            });

                        }else {
                            console.log(respData.msg); // 返回正确状态，但是没有数据，在此处处理。
                            var tdNum = $("#data-table-list thead tr td").length;
                            htmlstr = '<tr><td colspan="'+tdNum+'" class="data-null">数据为空</td></tr>';
                            $(".getData-list").html(htmlstr);
                        }
                    }else {
                        console.log(respData.msg);  // 返回错误状态，通常指网络请求失败、后台报错等，最好后台给出错误提示，方便前台调试。也可定义几种返回的错误状态码，如201 203 400 404 500 503等。
                    }
                },
                error: function(respData){ // ajax的error状态
                    console.log(respData);
                }
            });
        }

        // 运行获取数据列表这个方法，这里面可以灵活自定义要传递的参数
        function runGetDataList(){
            getDataList({
                classifyID : $("#classifyID").val() || '0', // 分类id
                currPage : $(".getData-list").attr("data-currPage") || 1, // 当前第几页
                pageSize: 10, // 每页几条
                datetimeStart : $("#search-datetime-start").val() || '',
                datatimeEnd : $("#search-datetime-end").val() || '',
                keywords : $("#search-input").val() || '',
            });
        }
        function edit(id){
            var url = "/admin/toUpdate?id=";
            var index = layer.open({
                type: 2,
                title: "管理员编辑",
                content: url+id
            });
            layer.full(index);
        }
        /*证书-删除*/
        function del(id){
            layer.confirm('确认要删除吗？',function(index){
                $.ajax({
                    url: '/admin/del/',// 跳转到 action, 换成自己的接口
                    data:{"id":id},
                    type: 'post',
                    cache: false,
                    dataType: 'json', // 不一定非要json，可以是html，后台封好结构后，直接扔前台
                    success: function(respData) {
                        if(respData.result){
                            layer.msg('删除成功!',{icon:1,time:2000});
                            setTimeout(function () { location.replace(location.href) }, 2000);
                        }else{
                            layer.msg('删除失败!',{icon:2,time:1000});
                        }
                    }
                });


            });
        }
        $(function(){
            runDatetimePicker(); // 实例化日期控件
            getUrlParameter(); // 获取URL参数，初始化条件


            runGetDataList(); // 页面载入，自执行加载数据...
            // 点击搜索执行...
            $("#search-submit").on("click",function(){
                runGetDataList();
            });


        });
	</script>
	<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>
